<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas 画图</title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            background: #ddd;
        }
    </style>
</head>
<body>
<canvas id="app" width="500" height="500"></canvas>
<script>
    // let app = document.getElementById("app");
    // 画笔 画圆形 0~360  ==  0~2PI
    // 公式： 90(角度)*Math.PI/180 = 弧度
    let ctx = app.getContext("2d");
    // 3. 开始新路径
    ctx.beginPath();
    // 4. 将画笔移动到指定点
    ctx.arc(250, 200, 25, 0, 2 * Math.PI); // 弧度
    // 5. 画直线
    // 6. 闭合
    ctx.closePath();
    // 7. 描边
    ctx.lineWidth = 5;
    ctx.strokeStyle = "red";
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(50, 50, 25, 0 * Math.PI / 180, 180 * Math.PI / 180);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(450, 350, 25, -90 * Math.PI / 180, 90 * Math.PI / 180);
    ctx.stroke();
</script>
</body>
</html>